{% stylesheet %}
.block_footer {
  background-color: var(--footer-bg);
  color: var(--footer-color);
  padding: 80px 0;
}

.block_footer .footer_content {
  display: grid;
  grid-column-gap: 40px;
  grid-row-gap: 20px;
}

@media screen and (min-width: 768px) {
  .block_footer .footer_content {
    grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
  }
}

.block_footer .footer_content .menu_item .logo {
  margin-bottom: 12px;
}

.block_footer .footer_content .menu_item .logo a {
  display: block;
  height: var(--logo-height);
  color: var(--footer-color);
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
}

.block_footer .footer_content .menu_item .logo a img {
  height: 100%;
}

.block_footer .footer_content .menu_item.detail_text {
  width: 310px;
}

.block_footer .footer_content .menu_item .menu_title {
  text-transform: uppercase;
  margin-bottom: 12px;
}

.block_footer .footer_content .menu_item .menu_title a {
  color: inherit;
}

.block_footer .footer_content .menu_item.logo_menu .list li {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .block_footer .footer_content .menu_item.pc_menu .pc {
    display: block;
  }
  .block_footer .footer_content .menu_item.pc_menu .yd {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .block_footer .footer_content .menu_item.pc_menu {
    position: relative;
  }
  .block_footer .footer_content .menu_item.pc_menu::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.6;
    bottom: 0;
    transform: scaleY(0.5);
  }
  .block_footer .footer_content .menu_item.pc_menu::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.6;
    top: 0;
    transform: scaleY(0.5);
  }
  .block_footer .footer_content .menu_item.pc_menu.show_list .list {
    height: auto;
    margin: 10px 0;
    opacity: 1;
    text-align: center;
  }
  .block_footer .footer_content .menu_item.pc_menu.show_list .yd svg {
    transform: rotate(180deg);
  }
  .block_footer .footer_content .menu_item.pc_menu .list {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: all 0.2s;
  }
  .block_footer .footer_content .menu_item.pc_menu .pc {
    display: none;
  }
  .block_footer .footer_content .menu_item.pc_menu .yd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
  }
  .block_footer .footer_content .menu_item.pc_menu .yd:active {
    background-color: #cbd9ea21;
  }
  .block_footer .footer_content .menu_item.pc_menu .yd .menu_title {
    margin-bottom: 0;
  }
  .block_footer .footer_content .menu_item.pc_menu .yd svg {
    height: 10px;
    width: 10px;
    transition: all 0.2s;
  }
}

.block_footer .list li {
  padding: 6px 0;
}

.block_footer .list li a {
  color: inherit;
  position: relative;
}

.block_footer .list li a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  bottom: -10px;
  opacity: 0;
  background-color: var(--footer-color);
  transition: all 0.1s;
}

.block_footer .list li a:hover::after {
  bottom: -5px;
  opacity: 1;
}

{% endstylesheet %}
{% if section  and section.type == "footer" %}{% assign section = section %}{% else %}{% assign section = theme_config.global.sections.footer %}{% endif %}{% assign data = section.settings %}
<div class="block_footer" style="--footer-bg: {{data.footer_bg}};--footer-color: {{data.footer_color}}">
    <div class="footer_content container_wrapper">
        <div class="menu_item logo_menu">
            <div class="logo">
                {% if data.footer_logo.src != '' %}
                <a href="/" style="--logo-height: {{data.logo_height}}px">
                    <img data-src="{{ data.footer_logo.src }}" data-crop-type="height" src="{{ 'empty_loading.png' | public_asset_abs_url }}"
                        alt="{{ data.footer_logo.alt }}" />
                </a>
                {% else %}
                <a href="/">STOCKHOLM</a>
                {% endif %}
            </div>
            <ul class="list">
               <li>
                {{data.copyright | parse_variables}}
               </li>   
            </ul>
        </div>
        <div class="menu_item detail_text">
            {% if data.title != '' %}
            <div class="menu_title">{{data.title}}</div>
            {% endif %}
            {% if data.detail != '' %}
            <div class="detail">
                {{data.detail}}
            </div>
            {% endif %}
        </div>
        
        
        
        {% get_nav nav_id={data.menu.id} %}
        {% if nav.size > 0 %}
        {% for item in nav.nav_item %}
        <div class="menu_item pc_menu">
            <div class="pc">
                <div class="menu_title">
                    {% include "nav_a", nav : item %}
                </div>
            </div>
           <div class="yd">
            <div class="menu_title">
                {% include "nav_a", nav : item %}
            </div>
                {% include 'footer_yd_svg' %}
           </div>

            <ul class="list">
                {%- if item.children -%}
                {% for childrenNav in item.children %}
                <li>
                    {% include "nav_a", nav : childrenNav %}
                </li>
                {% endfor %}
                {%- endif -%}
               
            </ul>
        </div>
        {%endfor%}
        {% else %}
        <div class="menu_item pc_menu">
            <div class="pc">
                <div class="menu_title">Company Info</div>
            </div>
            <div class="yd">
                <div class="menu_title">Company Info</div>
                {% include 'footer_yd_svg' %}
            </div>
            
            <ul class="list">
                <li><a href="/pages/About-Us">About Us</a></li>
                <li><a href="/pages/Contact-Us">Contact Us</a></li>
                <li><a href="/comments">Customer Reviews</a></li>
            </ul>
        </div>
        <div class="menu_item pc_menu">
            <div class="pc">
                <div class="menu_title">Service Center</div>
            </div>
            <div class="yd">
                <div class="menu_title">Service Center</div>
                {% include 'footer_yd_svg' %}
            </div>
           
            <ul class="list">
                <li><a href="/pages/Shipping-policy">Shipping policy</a></li>
                <li><a href="/pages/Return-policy">Return policy</a></li>
                <li><a href="/pages/Privacy-policy">Privacy policy</a></li>
                <li><a href="/pages/Terms-of-service">Terms of service</a></li>
            </ul>
        </div>
        <div class="menu_item pc_menu">
            <div class="pc">
                <div class="menu_title">Quick Links</div>
            </div>
            <div class="yd">
                <div class="menu_title">Quick Links</div>
                {% include 'footer_yd_svg' %}
            </div>
            <ul class="list">
                <li><a href="/blogs">Blog</a></li>
                <li<a href="/account/login">Login</a></li>
                <li><a href="/search">Search </a></li>
                <li><a href="/account/register">Register</a></li>
                <li><a href="/account/trackingorder">Tracking Order</a></li>
            </ul>
        </div>
        {% endif %}

       
    </div>
    <div class="container_wrapper" style='margin-top:15px'>
      {% include 'share_link',color:data.footer_color,section:data %}
    </div>
</div>
<script type="text/javascript">
(function(){$(".pc_menu .yd").on("click", function () {
  if ($(this).parent().hasClass("show_list")) {
    $(this).parent().removeClass("show_list");
  } else {
    $(this).parent().addClass("show_list");
  }
});
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "footer",
	"is_global": true,
	"name": {
		"zh_CN": "底部",
		"en_US": "Bottom"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "menu"
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "logo",
				"en_US": "Logo"
			},
			"default": {
				"src": "",
				"alt": ""
			},
			"info": {
				"zh_CN": "建议宽度1000px以上，高度自适应",
				"en_US": "Recommended width more than 1000px, height adaptive"
			},
			"id": "footer_logo"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "logo高度",
				"en_US": "Logo height"
			},
			"id": "logo_height",
			"unit": "px",
			"max": 120,
			"min": 20,
			"default": 4
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "版权信息",
				"en_US": "Copyright information"
			},
			"id": "copyright",
			"default": "@{{date_year}} {{storeConfig.name}} {{current_domain}}",
			"info": {
				"zh_CN": "<p><a target='_blank' href='https://oemsaas.yuque.com/staff-sbl3ig/clazyz/exmzohc53i16spuo' style='color:#3590e9'>如何配置？</a></p>",
				"en_US": "<p><a target='_blank' href='https://oemsaas.yuque.com/staff-sbl3ig/clazyz/exmzohc53i16spuo' style='color:#3590e9'>how to configure?</a></p>"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "our values"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": ""
		},
		{
			"type": "card_color",
			"id": "footer_bg",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"default": "#1c181a"
		},
		{
			"type": "card_color",
			"id": "footer_color",
			"label": {
				"zh_CN": "文字颜色",
				"en_US": "Text color"
			},
			"default": "#ffffff"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "SNS账号",
				"en_US": "SNS account"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Facebook",
				"en_US": "Facebook"
			},
			"id": "is_facebook"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Twitter",
				"en_US": "Twitter"
			},
			"id": "is_twitter"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Pinterest",
				"en_US": "Pinterest"
			},
			"id": "is_pinterest"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Instagram",
				"en_US": "Instagram"
			},
			"id": "is_instagram"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Snapchat",
				"en_US": "SnaPChat"
			},
			"id": "is_snapchat"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tiktok",
				"en_US": "Tiktok"
			},
			"id": "is_tiktok"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tumblr",
				"en_US": "Tumblr"
			},
			"id": "is_tumblr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Linkedin",
				"en_US": "Linkedin"
			},
			"id": "is_linkedin"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Youtube",
				"en_US": "Youtube"
			},
			"id": "is_youtube"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Vimeo",
				"en_US": "Vimeo"
			},
			"id": "is_vimeo"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "VK",
				"en_US": "VK"
			},
			"id": "is_vk"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Whatsapp",
				"en_US": "Whatsapp"
			},
			"id": "is_whatsapp"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"footer_bg": "#1c181a",
			"menu": {
				"id": "",
				"title": ""
			},
			"copyright": "@{{date_year}} {{storeConfig.name}} {{current_domain}}",
			"footer_color": "#ffffff",
			"logo_height": 50,
			"title": "our values",
			"detail": "It matters where you shop and what you choose. We believe in great design, from around the corner to around the globe.",
			"footer_logo": {
				"src": "",
				"alt": ""
			},
			"is_facebook": true,
			"is_twitter": true,
			"is_pinterest": false,
			"is_instagram": true,
			"is_snapchat": false,
			"is_tiktok": false,
			"is_tumblr": false,
			"is_linkedin": false,
			"is_youtube": false,
			"is_vimeo": false,
			"is_vk": false,
			"is_whatsapp": false
		},
		"blocks": []
	}
}
{% endschema %}